/**
 * @description 记忆录中的标签导航栏
 */

import { ref, watch } from 'vue'
import { defineStore } from 'pinia'

export const useLabelBarStore = defineStore('labelBar', () => {
    let labelList = ref([
        {
            id: 0,
            url: 'https://blog.csdn.net/qq_62541773?spm=1010.2135.3001.5343',
            name: '露西西★',
            iconType: 'Icon',
            icon: 'https://g.csdnimg.cn/static/logo/favicon32.ico'
        },
        {
            id: 1,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 2,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 3,
            url: 'https://blog.csdn.net/qq_62541773?spm=1010.2135.3001.5343',
            name: '露西西★',
            iconType: 'Icon',
            icon: 'https://g.csdnimg.cn/static/logo/favicon32.ico'
        },
        {
            id: 4,
            url: 'https://blog.csdn.net/qq_62541773?spm=1010.2135.3001.5343',
            name: '露西西★',
            iconType: 'Icon',
            icon: 'https://g.csdnimg.cn/static/logo/favicon32.ico'
        },
        {
            id: 5,
            url: 'https://blog.csdn.net/qq_62541773?spm=1010.2135.3001.5343',
            name: '露西西★',
            iconType: 'Icon',
            icon: 'https://g.csdnimg.cn/static/logo/favicon32.ico'
        },
        {
            id: 6,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 7,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 8,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 9,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 10,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 11,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 12,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 13,
            url: 'https://blog.csdn.net/qq_62541773?spm=1010.2135.3001.5343',
            name: '露西西★',
            iconType: 'Icon',
            icon: 'https://g.csdnimg.cn/static/logo/favicon32.ico'
        },
        {
            id: 14,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
        {
            id: 15,
            url: 'https://uiverse.io/profile/adamgiebl',
            name: 'uiverse',
            iconType: 'Text',
            icon: ''
        },
    ])

    //右键选中的桌面导航下标
    let rightClickDeskNavIndex = ref(0)
    
    //菜单Dom
    let menuDom = ref(null)

    //是否显示菜单
    let isShowMenu = ref(false)

    let commonLabelMainDOM = ref(null)

    watch(isShowMenu, (newVal) => {
        if(menuDom.value == null) return
        if (newVal) {
            menuDom.value.style.zIndex = 9999;
            menuDom.value.style.opacity = 1;

        } else {
            menuDom.value.style.zIndex = -1;
            menuDom.value.style.opacity = 0;
        }
    })


    let menuClickSlove = (e) => {
        isShowMenu.value = true

        let rect = null
        
        if (commonLabelMainDOM.value) {
            rect = commonLabelMainDOM.value.getBoundingClientRect();
            
        }
        let innerHeight = rect==null?0:rect.top;
        let innerWidth = rect==null?0:rect.left;
        
        // 获取鼠标点击的位置
        const mouseX = e.clientX;
        const mouseY = e.clientY;
        menuDom.value.style.left = mouseX - innerWidth + 'px'
        menuDom.value.style.top = mouseY - innerHeight - 289 + 'px' 

        // console.log('innerWidth',innerWidth,mouseX)
        // console.log(`鼠标右击位置: X=${mouseX - innerWidth}, Y=${mouseY - innerHeight}`);
    }

  
  return {
    labelList,
    rightClickDeskNavIndex,
    menuDom,
    isShowMenu,
    menuClickSlove,
    commonLabelMainDOM
  }
}, {
    persist: {
        storage: localStorage,
        pick: ['labelList']
    }
}
)